<template>
    <div class="ordercontent">
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="position"
                    label="职位名称"
                    align="center"
                    sortable
                    header-align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="发布时间"
                    sortable
                    align="center"
                    header-align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    header-align="center"
                    prop="amount"
                    label="伯乐奖金"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px;color:#dd4444">¥ {{ scope.row.amount}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    prop="bole"
                    label="伯乐信息"
                    align="center"
                    sortable
                    header-align="center"
            >
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.bole }}</p>
                        <p>电话: {{ scope.row.boleMobile }}</p>
                        <div slot="reference" class="name-wrapper">
                            <span style="margin-left: 10px">{{ scope.row.bole}}</span>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    header-align="center"
                    prop="lietou"
                    sortable
                    label="猎头信息"
            >
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.lietou }}</p>
                        <p>电话: {{ scope.row.lietouMobile }}</p>
                        <div slot="reference" class="name-wrapper">
                            <span style="margin-left: 10px">{{ scope.row.lietou}}</span>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>


            <el-table-column
                    align="center"
                    header-align="center"
                    prop="resume"
                    sortable
                    label="人才姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="订单状态"
                    align="center"
                    header-align="center"
                    :filters="[{ text: '尚未入职', value: '0' }, { text: '尚未支付', value: '1' }, { text: '报酬已结', value: '2' }, { text: '无效订单', value: '3' }]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                            :type="statusList[scope.row.status].style"
                            disable-transitions>{{statusList[scope.row.status].text}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            :type="scope.row.status == 1?'danger':'info'"
                            :disable="scope.row.status != 1"
                            @click="handleFinish(scope.$index, scope.row)">完成订单
                    </el-button>
                    <el-button
                            size="mini"
                            :type="scope.row.status == 1?'danger':'info'"
                            :disable="scope.row.status != 1"
                            @click="handleDelete(scope.$index, scope.row)">无效订单
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <br/>
        <el-row type="flex" justify="center">
            <el-pagination
                    style="align-self:center"
                    background
                    layout="prev, pager, next"
                    :current-page="currentPage"
                    :page-count="pages"
                    @current-change="changePage">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
    import Config from "@myconfig/config.min.js";

    export default {
        data() {
            return {
                acIndex: '',
                acRow: '',
                currentPage: 1,
                pages: 1,
                tableData: [],
                statusList: [
                    {text: "尚未入职", style: "primary"},
                    {text: "尚未支付", style: "danger"},
                    {text: "报酬已结", style: "success"},
                    {text: "无效订单", style: "info"}
                ]
            };
        },
        methods: {
            getData() {
                this.$http
                    .get(Config.baseUrl + "/api/system/bill/" + this.currentPage)
                    .then(function (rsp) {
                        if (rsp.data.pageNum == this.currentPage) {
                            this.tableData = rsp.data.list;
                            this.pages = rsp.data.pages;
                        }
                    });
            },
            filterTag(value, row, column) {
                console.log(value, row.status);
                return row.status == value;
            },
            changePage(value) {
                this.currentPage = value;
                this.getData();
            },
            finishCallBack(action) {

                if (action === 'confirm') {
                    console.log('cf')
                    this.$http
                        .post(Config.baseUrl + "/api/system/bill/finish/" + this.acRow.id)
                        .then(function (rsp) {
                            if (rsp.data.code == 1) {
                                this.$message({
                                    message: "标记完成订单成功～",
                                    type: "success"
                                });
                                this.tableData[this.acIndex].status = 2;
                            } else {
                                this.$message({
                                    message: "标记完成订单失败～",
                                    type: "danger"
                                });
                            }
                        }, function (error) {
                            this.$message({
                                message: "标记订单完成失败～",
                                type: "error"
                            });
                        });
                } else {
                    console.log('ncf')
                }
            },
            handleFinish(index, row) {
                this.acIndex = index;
                this.acRow = row
                if (row.status != 1) {
                    this.$message({
                        message: "只有未支付的订单可以标记完成～",
                        type: "warning"
                    });
                    return;
                }
                this.$confirm("此操作将标记为完成并不可更改, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    callback: this.finishCallBack
                })

            },
            deleteCallback(action) {
                if (action === 'confirm') {
                    console.log('cf')
                    this.$http
                        .post(Config.baseUrl + "/api/system/bill/invalid/" + this.acRow.id)
                        .then(function (rsp) {
                            if (rsp.data.code == 1) {
                                this.$message({
                                    message: "标记无效订单成功～",
                                    type: "success"
                                });
                                this.tableData[this.acIndex].status = 3;
                            } else {
                                this.$message({
                                    message: "标记无效订单失败～",
                                    type: "danger"
                                });
                            }
                        }, function (error) {
                            this.$message({
                                message: "标记无效订单失败～",
                                type: "error"
                            });
                        });
                } else {
                    console.log('ncf')
                }
            },
            handleDelete(index, row) {
                this.acIndex = index;
                this.acRow = row
                if (row.status != 1) {
                    this.$message({
                        message: "只有未支付的订单可以标记为无效订单～",
                        type: "warning"
                    });
                    return;
                }
                this.$confirm("此操作将标记为无效订单并不可更改, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    callback: this.deleteCallback
                })
                // .then((action,index) => {
                //   console.log(action,index)
                //
                // })
                // .catch((error) => {console.log(error)});
            }
        },
        mounted() {
            this.getData();
        }
    };
</script>

